<template>
  <Drawer :show="show" :title="description.title" :desc="description.subtitle" @close="closeCustomDrawer">
    <!--内容-->
    <view class="content">
      <!--基础清洁-->
      <view class="base-clean">
        <view class="base-text">{{ description.cleaningLevelOne.cleanTitle }}</view>
        <!--桶清洁-->
        <view class="drum-clean">
          <view class="set-text">{{ name }}</view>
          <view class="start" @click="start">去启动</view>
        </view>
        <!--购买清洁剂-->
        <view class="buy-drum-clean" @click="buy">
          <view class="set-text">{{ description.cleaningLevelOne.productsTitle }}</view>
          <image class="arrow" :src="'/static/ic_right_arrow.png'"></image>
        </view>
      </view>
      <!--深度清洁-->
      <view class="deep-clean">
        <view class="base-text">{{ description.cleaningLevelTwo.cleanTitle }}</view>
        <!--购买清洁剂-->
        <view class="buy-drum-clean" @click="schedule">
          <view class="set-text">{{ description.cleaningLevelTwo.productsTitle }}</view>
          <image class="arrow" :src="'/static/ic_right_arrow.png'"></image>
        </view>
      </view>
    </view>
  </Drawer>
</template>

<script setup lang="ts">
import type { BaseController } from '@/controller/BaseAppliance/definition'
import { jumpMP } from '@/utils/mpHelper'
import Drawer from '@/common/drawer.vue'
import { selectProgram } from '@/api/appliance'
import { OpenDrumCleanAvailable } from '@/constants/UniEventKeys'

const props = defineProps<{
  show: boolean
  description: description
  control: BaseController.Control
}>()

export type description = {
  title: string
  subtitle: string
  cleaningLevelOne: descriptionItem
  cleaningLevelTwo: descriptionItem
}

type descriptionItem = {
  cleanTitle: string
  productsTitle: string
  landingPage: string
  appid: string
}

const emit = defineEmits<{
  (e: 'update:show', show: boolean): void
  (e: 'start'): void
  (e: 'buy'): void
  (e: 'schedule'): void
  (e: 'goToProgramDetailPage'): void
}>()

const drumCleanKeyWordsArray = ['drumclean', 'machinecare']

const name = ref('筒清洁')
onBeforeMount(() => getPromGramName())

function getPromGramName() {
  let drumCleanProgram = props.control.store.allPrograms?.find((program) =>
    drumCleanKeyWordsArray.some((key) => program.key.toLowerCase().includes(key))
  )
  name.value = drumCleanProgram ? drumCleanProgram.name : '筒清洁'
}
/**
 * 关闭弹窗
 */
function closeCustomDrawer() {
  emit('update:show', false)
}

/**
 * 去启动
 */
function start() {
  // 首先获取桶清洁相关的program_key
  emit('update:show', false)
  let drumCleanProgram = props.control.store.allPrograms?.find((program) =>
    drumCleanKeyWordsArray.some((key) => program.key.toLowerCase().includes(key))
  )
  if (drumCleanProgram) {
    selectProgram(props.control.store._datasource.haId, drumCleanProgram.key)
    // props.control.store.startProgramNow(drumCleanProgram)
  }
  // 打开程序详情页面
  uni.$emit(OpenDrumCleanAvailable)
}

/**
 * 去购买
 */
function buy() {
  emit('buy')
  jumpMP(props.description.cleaningLevelOne.appid, props.description.cleaningLevelOne.landingPage),
    {},
    'Appliance.NoticeBar.DrumClean.ToBuy'
}

/**
 * 预约清洁服务
 */
function schedule() {
  emit('schedule')
  jumpMP(props.description.cleaningLevelTwo.appid, props.description.cleaningLevelTwo.landingPage),
    {},
    'Appliance.NoticeBar.DrumClean.OrderService'
}
</script>

<style lang="less">
.content {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  .base-clean {
    margin-top: 32rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    .drum-clean {
      height: 108rpx;
      background: #f4f4f6;
      margin-top: 24rpx;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      .start {
        font-family: 'PingFang SC';
        font-style: normal;
        font-weight: 600;
        font-size: 28rpx;
        line-height: 40rpx;
        letter-spacing: -0.428571px;
        text-transform: capitalize;
        color: var(--primary-color);
        margin-right: 24rpx;
      }
    }
    .buy-drum-clean {
      height: 108rpx;
      background: #f4f4f6;
      margin-top: 24rpx;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
    }
  }
  .deep-clean {
    margin-top: 32rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    .buy-drum-clean {
      height: 108rpx;
      background: #f4f4f6;
      margin-top: 24rpx;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
    }
  }
}

.base-text {
  font-family: 'PingFang SC';
  font-style: normal;
  font-weight: 500;
  font-size: 32rpx;
  height: 44rpx;
  line-height: 44rpx;
  display: flex;
  color: #333333;
}

.set-text {
  font-family: 'PingFang SC';
  font-style: normal;
  font-weight: 600;
  font-size: 36rpx;
  line-height: 40px;
  color: #333333;
  width: 290rpx;
  margin-left: 32rpx;
}

.arrow {
  width: 16rpx;
  height: 28rpx;
  margin-right: 24rpx;
}
</style>
